<template>
	<view class="page-group" style="background-color: white;">
		<view class="top-group-view">
			<view class="search-group">
				<image src="../../static/material/ic_search.png" style="width: 28rpx;height: 28rpx;margin-left: 32rpx;"></image>
				<input class="input-box-view" v-model="keyword" @confirm="formSubmit" confirm-type="search" type="text" placeholder="抖音号关键词搜索"  placeholder-class="placeholder-view"  />
			</view>
		</view>
		<view style="border: 1px solid rgba(0,0,0,0.03);width: 100vw;"></view>
		<view class="center-group-view">
			<mescroll-uni ref="mescrollRef" @init="mescrollInit" :top="104" :up="upOption" @up="upCallback" @down="downCallback">
				<view class="list-infos" @click="onItemClick(allAccountInfo)" v-if="!isShowcase">
					<image src="../../static/main/icon_home_logo.png" class="item-avatars"></image>
					<text class="item-titles">全部</text>
					<image v-if="chooseDisplayId == ''" src="../static/ic_account_checked.png" class="item-checks"></image>
					<image v-else src="../static/ic_account_normal.png" class="item-checks"></image>
				</view>
				<view v-for="(item, index) in accountList" :key="index" :id="index">
					<view class="list-infos" @click="onItemClick(item)">
						<image :src="item.avatar" class="item-avatars" mode="aspectFill"></image>
						<text class="item-titles">{{item.nickName}}</text>
						<image v-if="item.displayId == chooseDisplayId" src="../static/ic_account_checked.png" class="item-checks"></image>
						<image v-else src="../static/ic_account_normal.png" class="item-checks"></image>
					</view>
				</view>
			</mescroll-uni>
		</view>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import configUrls from '@/common/config.js';
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	export default {
		mixins: [MescrollMixin],
		components:{
			uniPopup
		},
		data() {
			return {
				upOption:{
					noMoreSize: 1,
					empty:{
						icon: '/static/mine/img_manage_empty.png',
						tip: '没有找到', 
					},
					textNoMore: '没有更多'
				},
				accountList: [],
				keyword: '',
				chooseDisplayId: '',
				allAccountInfo: {"nickName": "账号名称", "displayId": ""},
				isShowcase: false,
			}
		},
		onLoad(options) {
			if(options.displayId) {
				this.chooseDisplayId = options.displayId;
			}
			if(options.isShowcase) {
				this.isShowcase = true;
			}
		},
		methods: {
			upCallback(page) {
				var that = this;
				this.$Request.postJson(configUrls.getDyAccountList, {
					page: page.num,
					limit: 10,
					keywords: that.keyword,
				}).then(res => {
					if (res.code == "10000") {
						const respData = res.data.result.data;
						if (respData == null) {
							that.mescroll.endSuccess(0);
						    return;
						}
						that.mescroll.endSuccess(respData.length);
						if(page.num == 1) that.accountList = []; 
						that.accountList=that.accountList.concat(respData);
					} else {
						that.accountList = [];
						that.mescroll.endSuccess(0);
						that.mescroll.endErr();
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				}); 
			},
			downCallback() {
				this.mescroll.resetUpScroll();
			},
			formSubmit(e) {
				this.mescroll.resetUpScroll();
			},
			onItemClick(item) {
				this.$eventHub.$emit('chooseAccount', item);
				uni.navigateBack({
					delta: 1
				})
			},
		}
	}
</script>

<style>
	@import url("../../css/mine/manage.css");
	.list-infos {
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 100vw;
		height: 138rpx;
		border-bottom: 1rpx solid rgba(0,0,0,0.03);
	}
	.item-avatars {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-left: 32rpx;
		margin-right: 16rpx;
	}
	.item-titles {
		flex: 1;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 40rpx;
		white-space: pre-wrap;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}
	.item-checks {
		width: 36rpx;
		height: 36rpx;
		margin-right: 44rpx;
		margin-left: 32rpx;
	}
</style>
